<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>在线考试平台</title>
    <link rel="shortcut icon" href="static/layui/images/exam.png" type="image/x-icon">
    <link rel="stylesheet" href="static/layui/css/font.css">
    <link rel="stylesheet" href="static/layui/css/xadmin.css">
    <script src="static/layui/lib/layui/layui.js"></script>
    <script src="static/layui/js/xadmin.js"></script>
    <script src="static/layui/js/jquery.min.js"></script>

</head>

<body>
<div class="layui-fluid">

    <div class="layui-row layui-col-space15" style="background: #f7f8fc">
        <div class="layui-row layui-col-space15" style="background: #f7f8fc">
            <form class="layui-form layui-form-pane" action="" lay-filter="example">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">添加学生</label>
                        <div class="layui-input-block">
                            <div id="choice_user" style="width: 300px"></div>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit="" lay-filter="add_class_user">添加</button>
                        </div>
                    </div>
                </div>

            </form>
        </div>
        <div class="layui-row layui-col-space15" style="background: #f7f8fc">

            <div class="layui-tab-content">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-sm12 layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-body ">
                                <table class="layui-hide" id="class_user_list" lay-filter="class_user_list"></table>
                                <script type="text/html" id="barDemo">
                                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                                </script>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>

<script>
    var user_data = [];
    var choice_user;
    layui.config({
        base: 'static/layui/xmSelect/'
    }).extend({
        xmSelect: 'xm-select'
    }).use(['element', "form", 'jquery', 'layer', 'xmSelect'], function () {
        const form = layui.form;
        const $ = layui.jquery;
        const layer = layui.layer;
        const element = layui.element;
        const xmSelect = layui.xmSelect;
        const c_id = "${c_id}";

        get_class_user();
        get_not_in_class_user();


        form.on("submit(add_class_user)", function (data) {
            const u_ids = choice_user.getValue('value').toString();
            if (u_ids.length===0){
                layer.msg("添加的学生不能为空", {icon: 5});
                return false
            }
            $.ajax({
                url: 'add_class_user',
                dataType: "json",//数据格式
                type: "post",//请求方式
                async: false,//是否异步请求
                data: {
                    c_id: c_id,
                    u_ids:u_ids,
                },
                success: function (data) {
                    if (data.code === 0) {
                        layer.msg(data.message, {icon: 5, time: 1000})
                    } else if (data.code === 200) {
                        layer.confirm(data.message, {icon: 6}, function () {
                            window.location.reload();
                        })
                    } else {
                        layer.msg('系统繁忙', {icon: 5, time: 1000})
                    }
                },
                error: function (e) {
                    alert("出现错误！！");
                }
            });
            return false

        });

    });


    function get_not_in_class_user() {
        layui.use(['element', "form", 'jquery', 'layer'], function () {
            const form = layui.form;
            choice_user = xmSelect.render({
                el: '#choice_user',
                filterable: true,
                paging: true,
                pageSize: 10,
                autoRow: true,
                model: {
                    label: {
                        block: {
                            template: function (item, sels) {
                                return item.value;
                            },
                        },
                    }
                },
                template({item, sels, name, value}) {
                    return item.name + '<span style="position: absolute; right: 10px; color: #8799a3">' + value + '</span>'
                },
                toolbar: {
                    show: true,
                },
                data: []
            })

            const c_id = "${c_id}";
            $.ajax({
                url: 'get_not_in_class_user_by_c_id',
                dataType: "json",//数据格式
                type: "post",//请求方式
                async: false,//是否异步请求
                data: {c_id: c_id},
                success: function (data) {
                    if (data.code === 200) {
                        user_data = [];
                        for (let i = 0; i < data.result.length; i++) {
                            user_data.push({
                                name: data.result[i].u_name,
                                value: data.result[i].u_id
                            });
                        }
                        choice_user.update({
                            data: user_data
                        })
                    }
                },
                error: function (e) {
                    alert("出现错误！！");
                }
            });
        })
    }

    function get_class_user() {
        layui.use(["form", 'jquery', 'layer', 'table'], function () {
            const $ = layui.jquery;
            const layer = layui.layer;
            const table = layui.table;
            const c_id = "${c_id}";
            table.render({
                elem: '#class_user_list'
                , url: 'get_class_user_list_by_c_id'
                , where: {c_id: c_id}
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , title: '用户表'
                , cols: [[
                    {field: 'cu_id', title: '序号', sort: true}
                    , {field: 'c_name', title: '班级', templet: '<div>{{d.eClass.c_name}}</div>'}
                    , {field: 'u_sno', title: '用户号', templet: '<div>{{d.sysUser.u_sno}}</div>'}
                    , {field: 'u_name', title: '姓名', templet: '<div>{{d.sysUser.u_name}}</div>'}
                    , {title: '操作', align: 'center', toolbar: '#barDemo'}
                ]]
                , page: {				//分页设置
                    limit: 10,		//默认每一页显示数量
                    limits: [5, 10, 20, 30, 40, 50]		//可选择每页显示的数量
                }
                , parseData: function (res) { //res 即为原始返回的数据
                    var current_pages;
                    //第一次显示的时候this.page=true，把这种情况单独列出
                    if (this.page === true) current_pages = 1;
                    else current_pages = this.page.curr;
                    //根据分页要求选出需要显示的数据
                    let data = res.result.slice(this.limit * (current_pages - 1), this.limit * current_pages);
                    //alert(JSON.stringify(data));
                    return {
                        "code": res.code,
                        "msg": res.message,
                        "count": res.result.length,
                        "data": data
                    }
                }
            });

            //监听行工具事件
            table.on('tool(class_user_list)', function (obj) {
                let data = obj.data;
                console.log(obj)
                if (obj.event === 'del') {
                    layer.confirm('确认删除？', {icon: 0}, function () {
                        $.ajax({
                            url: 'del_class_user_list_by_cu_id',
                            dataType: "json",//数据格式
                            type: "post",//请求方式
                            async: false,//是否异步请求
                            data: {
                                cu_id: data.cu_id,
                            },
                            success: function (data) {
                                if (data.code === 200) {
                                    layer.msg(data.message, {icon: 6, time: 1000}, function () {
                                        table.reload('class_user_list', {})
                                        get_not_in_class_user();
                                    });
                                } else {
                                    layer.msg(data.message, {icon: 5, time: 1000});
                                }
                            },
                            error: function (e) {
                                alert("出现错误！！");
                            }
                        });
                    });
                }
            });

        });
    }


    function getDateDiff(dateTimeStamp) {
        var minute = 1000 * 60;
        var hour = minute * 60;
        var day = hour * 24;
        var halfamonth = day * 15;
        var month = day * 30;
        var now = new Date().getTime();
        var diffValue = now - dateTimeStamp;
        if (diffValue < 0) {
            //若日期不符则弹出窗口告之
            //alert("结束日期不能小于开始日期！");
        }
        var monthC = diffValue / month;
        var weekC = diffValue / (7 * day);
        var dayC = diffValue / day;
        var hourC = diffValue / hour;
        var minC = diffValue / minute;
        if (monthC >= 1) {
            result = "创建于" + parseInt(monthC) + "个月前";
        } else if (weekC >= 1) {
            result = "创建于" + parseInt(weekC) + "周前";
        } else if (dayC >= 1) {
            result = "创建于" + parseInt(dayC) + "天前";
        } else if (hourC >= 1) {
            result = "创建于" + parseInt(hourC) + "个小时前";
        } else if (minC >= 1) {
            result = "创建于" + parseInt(minC) + "分钟前";
        } else
            result = "刚刚创建";
        return result;
    }

    //js函数代码：字符串转换为时间戳
    function getDateTimeStamp(dateStr) {
        var time_stamp = Date.parse(dateStr.replace(/-/gi, "/"));
        return getDateDiff(time_stamp)
    }
</script>

</html>